<template>
  <div class="container">
    <div class="page-title">账号安全</div>
    <div class="info-wrap">
      <div class="text-info">
        <div class="info-row">
          <div class="title">旧密码</div>
          <input
            class="data-input"
            type="password"
            v-model="form.oldPwd"
            minlength="8"
            required
          />
        </div>
        <div class="info-row">
          <div class="title">新密码</div>
          <input class="data-input" type="password" v-model="form.newPwd" />
        </div>
        <div class="info-row">
          <div class="title">重复密码</div>
          <input class="data-input" type="password" v-model="form.repeatPwd" />
        </div>
      </div>
      <button class="edit-button" @click="edit()">更换密码</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "UserInfo",
  data() {
    return {
      isLogin: false,
      userPwd: "12345678",
      form: {
        oldPwd: "",
        newPwd: "",
        repeatPwd: "",
      },
    };
  },
  methods: {
    edit() {
      if (
        this.form.oldPwd === "" ||
        this.form.newPwd === "" ||
        this.form.repeatPwd === ""
      ) {
        this.$message({
          showClose: true,
          message: "输入框不可为空！",
          type: "warning",
        });
        return;
      }
      // if (this.form.oldPwd != this.userPwd) {
      //   this.$message({
      //     showClose: true,
      //     message: "旧密码输入错误！",
      //     type: "warning",
      //   });
      //   this.form.oldPwd = "";
      //   return;
      // }
      if (this.form.newPwd.length < 8) {
        this.$message({
          showClose: true,
          message: "密码不可少于8字！",
          type: "warning",
        });
        this.form.newPwd = "";
        this.form.repeatPwd = "";
        return;
      }
      if (this.form.newPwd != this.form.repeatPwd) {
        this.$message({
          showClose: true,
          message: "重复密码输入错误！",
          type: "warning",
        });
        this.form.repeatPwd = "";
        return;
      }

      //把form提交到后端
      let formData = new FormData();
      formData.append("old_password", this.form.oldPwd);
      formData.append("new_password", this.form.newPwd);
      this.$axios({
        method: "post",
        url: "/api/changePassword",
        data: formData,
      })
        .then((res) => {
          console.log(res);
          if (res.data.errno == 900021) {
            this.$message({
              showClose: true,
              message: "密码输入错误！",
              type: "warning",
            });
            this.form.repeatPwd = "";
            this.form.newPwd = "";
            this.form.oldPwd = "";
          }else if(res.data.errno ==900020){
            this.$message({
              showClose: true,
              message: "密码修改成功！",
              type: "success",
            });
            this.form.repeatPwd = "";
            this.form.newPwd = "";
            this.form.oldPwd = "";
          }
        })
        .catch((err) => {
          console.log(err.response.data.code);
        });
    },
  },
};
</script>
<style scoped>
.edit-button {
  display: block;
  margin: 12px 0;
  padding: 8px 20px;
  border-radius: 5px;
  border: none;
  color: #fff;
  background-color: #7e8fe7;
  letter-spacing: 1px;
  cursor: pointer;
}
.data-input:focus {
  outline: none;
}
.data-input {
  display: inline-block;
  width: 400px;
  padding: 10px 5px;
  box-sizing: border-box;
  font-size: 16px;
  letter-spacing: 1px;
  border: none;
  background-color: #dedede46;
  border-radius: 5px;
}
.data {
  display: inline-block;
  width: 400px;
  padding: 10px 5px;
  box-sizing: border-box;
}
.title {
  display: inline-block;
  width: 150px;
  padding: 10px 0;
  vertical-align: top;
  color: #888888;
}
.info-row {
  margin: 5px 0;
  width: 800px;
}
.text-info {
  display: inline-block;
  word-wrap: break-word;
}
.info-wrap {
  /* width: 100%; */
  padding: 20px 40px;
  box-shadow: #dedede 0px 0px 20px;
}
.page-title {
  margin: 0 0 40px 0;
  font-size: 22px;
  font-weight: 600;
  color: #3d3daf;
}
.container {
  letter-spacing: 1px;
  width: 1000px;
}
</style>